<template>
  <div class="_class">
    <myHead></myHead>
    <section>
      <nav class="title">
        <span :class="active == 1 ? 'active' : ''" @click="active = 1"
          >全部</span
        >
        <span :class="active == 2 ? 'active' : ''" @click="active = 2"
          >零基础</span
        >
        <span :class="active == 3 ? 'active' : ''" @click="active = 3"
          >进阶课</span
        >
      </nav>
      <ul class="container flex">
        <li v-for="(l, i) in content" :key="i">
          <van-tag
            class="level"
            size="small"
            :type="l.level == '零基础' ? 'success' : 'danger'"
            >{{ l.level }}</van-tag
          >
          <van-image class="c-img" :src="l.img" />
          <p class="people">
            <span>{{ l.peopleStudy }}人学习 · {{ l.conments }}评论</span>
          </p>
          <p>
            <span class="hotPrice">￥{{ l.price }}</span>
            <span class="delPrice">￥{{ l.price + 700 }}</span>
          </p>
          <p class="tag">
            <van-tag size="small" color="red" plain type="primary"
              >优惠价</van-tag
            >
          </p>
        </li>
      </ul>
    </section>
  </div>
</template>


<style lang="scss" scoped>
.title {
  margin-bottom: 10px;
  span {
    margin-right: 5px;
    color: #71777d;
    font-size: 14px;
  }
  .active {
    color: black;
    font-weight: 700;
  }
}
.container {
  flex-wrap: wrap;
  li {
    flex-shrink: 0;
    width: calc(50% - 0.2133rem);
    overflow: hidden;
    background-color: #fff;
    border-radius: 0.16rem;
    margin-bottom: 0.32rem;
    margin-right: 0.21333333rem;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    .level {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      font-size: 12px;
      padding-left: 4px;
      padding-right: 4px;
    }
    p {
      padding-left: 8px;
      margin-bottom: 5px;
    }
    .people {
      color: #71777d;
      font-size: 11px;
    }
    .hotPrice {
      color: #f01414;
      font-size: 16px;
      margin-right: 10px;
      font-weight: 800;
    }
    .delPrice {
      font-size: 12px;
      color: #b7bbff;
      text-decoration: line-through;
    }
  }
}
</style>
<script>
export default {
  data() {
    return {
      active: 1,
      axios: {
        "id|+1": 1, //生成课程id，自增1
        // title: "@ctitle(15)", //生成课程名
        "price|2000-10000": 2000, //随机生成课程价格 在30-1000之间
        img: "@Image('163x96','#6ff','#f7f0d4','前端')", //生成随机图片，大小/背景色/字体颜色/文字信息
        "level|1": ["零基础", "进阶"], //等级是数组中的一个
        "peopleStudy|100-5000": 100,
        "conments|10-2000": 10,
      },
      content: [],
    };
  },
  methods: {
    getData() {
      this.$axios
        .post("/class/content", { body: this.axios })
        .then((res) => {
          // console.log(res);
          this.content = res.data["data"];
          console.log(this.content);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    this.getData();
  },
  watch: {
    active: "getData",
  },
};
</script>